<template>
  <div id="editor" ref="editor"></div>
</template>
 
<script>
	import E from 'wangeditor'
	export default {
    name:'WangEditor',
    props:{
      wangEditorContent:{
        type:String,
      },
      isClear: {
        type: Boolean,
        default: false
      },
      upload_config_id:{
        type:Number,
      },
      isRefrash: {
        type: Boolean,
        default: false
      }
    },
		data() {
		  return {
		    editor: ""
		  }
    },
    watch: {
      isRefrash(val) {
        if (val) {
          this.destory()
          this.init()
        }
      },
      isClear(val) {
        if(val) {
          this.editor.txt.clear()
        }
      }
    },
		mounted() {
      this.init()
		},
    methods: {
      init() {
        this.$nextTick(function() {
          const _this = this
          this.editor = new E(this.$refs.editor)
          this.editor.config.uploadImgMaxLength = 1
          this.editor.config.uploadFileName = 'file'
          this.editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
          this.editor.config.uploadImgMaxSize = 10 * 1024 * 1024
          this.editor.config.uploadImgServer = '#'
          this.editor.create()
          if(_this.wangEditorContent){
            this.editor.txt.html(_this.wangEditorContent)
          }
          this.editor.config.onchange = (html)=>{
            _this.$emit('update:wangEditorContent',html)
          }

          this.editor.config.uploadImgHooks = {
            error: function(xhr, editor, resData) {
              console.log('error', xhr, resData)
            },
            customInsert: function(insertImgFn, result) {
              insertImgFn(result.data)
            }
          }

          this.editor.config.customUploadImg = function (resultFiles, insertImgFn) {
            let formdata = new FormData()
            formdata.append('file', resultFiles[0])
            formdata.append('edit', true)
            formdata.append('upload_config_id', _this.upload_config_id)
            _this.$axios.post('/api/base/file/upload', formdata).then(res => {
              insertImgFn(res.data.data)
            })
          }
        });
      },
      destory() {
        this.editor.destroy()
      }
    }
	}
</script>

<style scoped  lang="scss">
/deep/.w-e-toolbar{
  z-index: 1 !important;
}
/deep/.w-e-menu {
  z-index: 2 !important;
}
/deep/.w-e-text-container {
  z-index: 1 !important;
}

#editor {
  width: 90%;
}
</style>


